<template>
	<div class="employ_conter">
		<!--      统计保费-->
		<div class="Statistics_item1">
			<div class="Statistics_item2">
				<!--        <h3 style="color: #666666;margin-top: 10px;text-align: center">保费统计</h3>-->
				<div class="Statistics_item2_top">
					<div class="titles">数据统计</div>
					<div style="display: flex;">
						<el-button type="primary" @click="getPremiumMonth">月份</el-button>
						<el-button type="primary" @click="getPremiumquarters">季度</el-button>
					</div>
					<el-form style="margin:30px 0;display: flex;flex-wrap: wrap;height: 100px; " ref="queryParams" :model="queryParams1"
						label-width="100px">
						<el-form-item label="年份">
							<el-date-picker v-model="queryParams1.year" type="year" placeholder="选择年"
								value-format="yyyy">
							</el-date-picker>
						</el-form-item>
						<el-form-item v-if="show1" label="月份">
							<el-select v-model="queryParams1.months" multiple placeholder="请选择月份">
								<el-option v-for="item in premium" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-else label="季度">
							<el-select v-model="queryParams1.quarters" multiple placeholder="请选择季度">
								<el-option v-for="item in premium1" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="被保险人" label-width="100px">
							<el-select v-model="queryParams1.sys_id" placeholder="请选择被保险人">
								<el-option v-for="item in insured" :key="item.user_id" :label="item.user_name"
									:value="item.user_id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="保司" label-width="100px">
							<el-select v-model="queryParams1.safety_mechanism" placeholder="请选择">
								<el-option v-for="item in mechanism" :key="item" :label="item" :value="item">
								</el-option>
							</el-select>
						</el-form-item>
						<div class="btn">
							<el-button type="primary" size="mini" @click="getSearchPremium">搜索</el-button>
							<el-button type="info" size="mini" @click="resetPremium">重置</el-button>
						</div>
					</el-form>
					<div class=" peopleNumber1">
						<div class="peopleNumber2" @click="getPremium">
							<div class="title">总保费</div>
							<div class="price">
								<span>{{ total || 0}}</span>
								<span class="name"> 元</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img1+')'}" @click="getPremium1">
							<div class="title">出单保费</div>
							<div class="price">
								<span>{{ priceCount2 || 0}}</span>
								<span class="name"> 元</span>
							</div>
						</div>
						<div class="peopleNumber2" :style="{backgroundImage:'url('+img3+')'}" @click="getPremium2">
							<div class="title">批单保费</div>
							<div class="price">
								<span>{{ priceCount1 || 0}}</span>
								<span class="name"> 元</span>
							</div>
						</div>
					</div>
				</div>
				<div class="Statistics_item2_conter">
					<!--          width: 800px v-if="show1"-->
					<div class="title">统计图表</div>
					<div v-if="show1" id="premium" ref="premium"
						style="width:100%;height:545px;background: #FFFFFF;border-radius: 10px;padding:20px 0;box-sizing: border-box">
					</div>
					<div v-else id="premium1" ref="premium1"
						style="width:100%;height:545px;background: #FFFFFF;border-radius: 10px;padding:20px 0;box-sizing: border-box">
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		totalInsurePrice1,
		get_safety_mechanism
	} from '@/api/home'
	import {
		seacond_admin
	} from "@/api/insurance/user";
	let echarts = require('echarts/lib/echarts')
	export default {
		name: "index",
		data() {
			return {
				img1: require('../../../assets/images/statistics_bg1.png'),
				img3: require('../../../assets/images/statistics_bg3.png'),
				show1: true,
				//查看保费
				queryParams1: {
					months: [],
					quarters: [],
					year: "2021",
					user_id: '', //操作人id
					sys_id: '',
					safety_mechanism: '', //保司
				},
				queryParams2: {
					user_id: '',
					role_id: '',
				},
				total: '', //总保费
				priceCount1: 0, //出单保费
				priceCount2: 0, //批单保费
				sum: [], //月份出单保费
				money: [], //季度出单保费
				sum1: [], //月份批单保费
				money1: [], //季度批单保费
				insured: [], //被保险人
				mechanism: [], //可看保司
				//保费的年份
				premium: [{
						value: '1',
						label: '1月'
					},
					{
						value: '2',
						label: '2月'
					},
					{
						value: '3',
						label: '3月'
					},
					{
						value: '4',
						label: '4月'
					},
					{
						value: '5',
						label: '5月'
					},
					{
						value: '6',
						label: '6月'
					},
					{
						value: '7',
						label: '7月'
					},
					{
						value: '8',
						label: '8月'
					},
					{
						value: '9',
						label: '9月'
					},
					{
						value: '10',
						label: '10月'
					},
					{
						value: '11',
						label: '11月'
					},
					{
						value: '12',
						label: '12月'
					}
				],
				//保费的季度
				premium1: [{
					value: '1',
					label: '1季度'
				}, {
					value: '2',
					label: '2季度'
				}, {
					value: '3',
					label: '3季度'
				}, {
					value: '4',
					label: '4季度'
				}],
			}
		},
		mounted() {
			var user = JSON.parse(localStorage.getItem('userInfo'));
			this.queryParams2.user_id = user.userId;
			if (user.roles.length != 0) {
				this.queryParams2.role_id = user.roles[0].roleId
			}
			this.queryParams1.user_id = JSON.parse(localStorage.getItem('userInfo')).userId;
			this.drawChart2();
			seacond_admin(this.queryParams2).then(res => {
				// console.log('被保险人数据',res)
				this.insured = res.data;

			})
			this.getMechanism()

		},
		methods: {
			//可看保司
			getMechanism() {
				get_safety_mechanism(this.queryParams2).then(res => {
					if (res.code == 1) {
						this.mechanism = res.data
					}
					// console.log('保司',res)
				})
			},
			//查看保费月份数据
			getPremiumMonth() {
				this.show1 = true;
				this.drawChart2();
				this.resetPremium();
			},
			//查看保费季度数据
			getPremiumquarters() {
				this.show1 = false;
				this.drawChart3();
				this.resetPremium();
			},
			//重置保费
			resetPremium() {
				this.queryParams1 = {
					months: [],
					quarters: [],
					year: "2021",
					user_id: this.queryParams2.user_id, //操作人id
					sys_id: ''
				}
				if (this.show1) {
					this.drawChart2();
				} else {
					this.drawChart3();
				}
			},
			//点击总保费跳转到投保用户页面
			getPremium() {
				var obj = {
					months: this.queryParams1.months,
					quarters: this.queryParams1.quarters,
					year: this.queryParams1.year,
					sys_id: this.queryParams1.sys_id

				}
				//点击跳转到参保人员页面
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//点击出单保费跳转到投保用户页面
			getPremium1() {
				var obj = {
					months: this.queryParams1.months,
					quarters: this.queryParams1.quarters,
					year: this.queryParams1.year,
					isApproveUser: '0',
					sys_id: this.queryParams1.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			getPremium2() {
				var obj = {
					months: this.queryParams1.months,
					quarters: this.queryParams1.quarters,
					year: this.queryParams1.year,
					isApproveUser: '1',
					sys_id: this.queryParams1.sys_id
				}
				this.$router.push({
					path: '/insurancemanagement/user1',
					// path: '/business/user/index',
					query: {
						peopleNum: obj
					}
				})
			},
			//搜索保费
			getSearchPremium() {
				if (this.show1) {
					this.drawChart2();
				} else {
					this.drawChart3();
				}
			},
			drawChart2() {
				totalInsurePrice1(this.queryParams1).then(res => {
					// console.log('统计保费', res);
					//月份出单保费
					this.sum = [];
					//季度批单保费
					this.sum1 = [];
					this.priceCount1 = res.data.priceCount1; //出单保费
					this.priceCount2 = res.data.priceCount2; //批单保费
					//获取总人数
					this.total = res.data.total;
					//查询月份的数据
					for (var i = 0; i < res.data.months1.length; i++) {
						var key = res.data.months1[i];
						// console.log('保费',res.data.months[i].SUM(insurance_fee_count))
						this.sum[key.month - 1] = key.money
					}
					for (var i = 0; i < res.data.months2.length; i++) {
						var key = res.data.months2[i];
						// console.log('保费',res.data.months[i].SUM(insurance_fee_count))
						this.sum1[key.month - 1] = key.money
					}
					// console.log('sum', this.sum)
					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.premium);

					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ( 元 )'
						},
						legend: {
							data: ["出单保费", "批单保费"]
						},
						xAxis: {
							name: '月份',
							type: 'category',
							data: ['1 月', '2 月', '3 月', '4 月', '5 月', '6 月', '7 月', '8 月', '9 月', '10 月',
								'11 月', '12 月'
							]
						},
						emptyshow: {
							type: Boolean,
							default: true,
						},
						grid: {
							left: '10%',
							right: '10%',
							bottom: '3%',
							// top:'3%',
							containLabel: true
						},

						yAxis: [{
							name: '单位:万元',
							type: 'value',
						}],
						series: [

							{
								name: "出单保费",
								type: "bar",
								data: this.sum1,
								// color: ['#7ECEEB'],
								// // barGap:0,
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign:'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance:15,
								//   formatter: '{c} 元',
								//   fontSize:12,
								//   color:'#A735E0'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#052EFF'
										},
										{
											offset: 0,
											color: '#58D6FF'
										},
									])

								}
							},
							{
								name: "批单保费",
								type: "bar",
								data: this.sum,
								// color: ['#45DFE4'],
								// // barGap:0,
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign:'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance:15,
								//   formatter: '{c} 元',
								//   fontSize:12,
								//   color:'#F11B82'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#EF5108'
										},
										{
											offset: 0,
											color: '#FFAE58'
										},
									])

								}
							}
						]
					};
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// const self = this;
					// setTimeout(() => {
					//   window.onresize = function() {
					//     self.chart = echarts.init(self.$refs.premium);
					//     self.chart.resize();
					//   }
					// },20)
					// 展示月份的统计表
					myChart.setOption(option);
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						// console.log('params', params)
						var month = []
						month.push(params.name.split(' ')[0])
						if (params.seriesName == '出单保费') {
							var obj = {
								month: month,
								quarters: [],
								year: this.queryParams1.year,
								isApproveUser: '0',
								sys_id: this.queryParams1.sys_id
							}
						}
						if (params.seriesName == '批单保费') {
							var obj = {
								month: month,
								quarters: [],
								year: this.queryParams1.year,
								isApproveUser: '1',
								sys_id: this.queryParams1.sys_id
							}
						}
						// console.log('23245')
						this.$router.push({
							path: '/insurancemanagement/user1',
							// path: '/business/user/index',
							query: {
								peopleNum: obj
							}
						})


						// console.log('month', month)
					})
				})

			},
			drawChart3() {
				totalInsurePrice1(this.queryParams1).then(res => {
					// console.log('统计保费12', res);
					//出单季度保费
					this.money = [];
					//批单季度保费
					this.money1 = [];
					this.priceCount1 = res.data.priceCount1; //出单保费
					this.priceCount2 = res.data.priceCount2; //批单保费
					//获取总人数
					this.total = res.data.total;
					//查询月份的数据

					for (var i = 0; i < res.data.quarters1.length; i++) {
						var key = res.data.quarters1[i];
						this.money[key.quarter - 1] = key.money
					}
					for (var i = 0; i < res.data.quarters2.length; i++) {
						var key = res.data.quarters2[i];
						this.money1[key.quarter - 1] = key.money
					}
					// 基于准备好的dom，初始化echarts实例
					let myChart = this.$echarts.init(this.$refs.premium1);

					// 展示月份的统计表
					let option = {
						color: ['#3398DB'],
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ( 元 )'
						},
						legend: {
							data: ["出单保费", "批单保费"]
						},
						xAxis: {
							name: '季度',
							type: 'category',
							data: ['1 季度', '2 季度', '3 季度', '4 季度']
						},
						emptyshow: {
							type: Boolean,
							default: true,
						},
						grid: {
							left: '10%',
							right: '10%',
							bottom: '3%',
							// top:'3%',
							containLabel: true
						},

						yAxis: [{
							name: '保费(元)',
							type: 'value',
						}],
						series: [{
								name: "出单保费",
								type: "bar",
								data: this.money1,
								// color: ['#7ECEEB'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign:'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 25,
								//   formatter: '{c} 元',
								//   fontSize:12,
								//   color:'#A735E0'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#052EFF'
										},
										{
											offset: 0,
											color: '#58D6FF'
										},
									])

								}
							},
							{
								name: "批单保费",
								type: "bar",
								data: this.money,
								// color: ['#45DFE4'],
								// label: {
								//   show: true,
								//   position: 'insideLeft',
								//   verticalAlign:'middle',
								//   align: 'left',
								//   rotate: 90,
								//   distance: 25,
								//   formatter: '{c} 元',
								//   fontSize:12,
								//   color:'#F11B82'
								// },
								itemStyle: {
									barBorderRadius: [10, 10, 0, 0], // 设置柱状图圆角
									//图形渐变色
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 1,
											color: '#EF5108'
										},
										{
											offset: 0,
											color: '#FFAE58'
										},
									])

								}
							}

						]
					};
					window.addEventListener('resize', () => {
						myChart.resize()
					})
					// const self = this;
					// // 展示月份的统计表
					myChart.setOption(option);
					// setTimeout(() => {
					//   window.onresize = function() {
					//     self.chart = echarts.init(self.$refs.premium1);
					//     self.chart.resize();
					//   }
					// },20)
					//关闭当前点击事件
					myChart.off('click');
					//打开当前点击事件
					myChart.on('click', (params) => {
						const pointInPixel = [params.offsetX, params.offsetY];
						var quarters = []
						// console.log('params', params)
						quarters.push(params.name.split(' ')[0])
						if (params.seriesName == '出单保费') {
							var obj = {
								month: [],
								quarters: quarters,
								year: this.queryParams1.year,
								isApproveUser: '0',
								sys_id: this.queryParams1.sys_id
							}
						}
						if (params.seriesName == '批单保费') {
							var obj = {
								month: [],
								quarters: quarters,
								year: this.queryParams1.year,
								isApproveUser: '1',
								sys_id: this.queryParams1.sys_id
							}
						}
						//
						this.$router.push({
							path: '/insurancemanagement/user1',
							// path: '/business/user/index',
							query: {
								peopleNum: obj
							}
						})

						// console.log('month', month)
					})
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.employ_conter {
		background-color: #E9EEF5;
		width: 100%;
		//height: 800px;
		overflow: auto;

		.el-form {
			margin: 10px 0;
			display: flex;
			align-items: center;

			//background-color: deeppink;
			.el-form-item {
				margin-bottom: 0;

				.el-select {
					width: 200px;
				}
			}

			.btn {
				margin-left: 10px;
				display: flex;
				align-items: center;
				//background-color: pink
			}
		}

		.Statistics_item1 {
			//background-color: pink;
			//margin: 10px;
			padding: 10px;
			//max-width: 100%;
			//min-width:25%;
			width: 100%;

			.Statistics_item2 {
				//overflow: hidden;
				//-webkit-box-shadow: #999 0px 0px 8px;
				//-moz-box-shadow: #999 0px 0px 8px;
				//box-shadow: #999 0px 0px 8px;
				//border-radius: 6px;
				//background: #FFFFFF;
				//background-color: palegoldenrod;
				width: 100%;
				padding: 0 10px;

				.Statistics_item2_top {
					//background: #FFFFFF;
					border-radius: 20px;
					padding: 20px;

					.titles {
						height: 26px;
						font-size: 26px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #333333;
						margin: 20px 0;
					}

					.peopleNumber1 {
						width: 100%;
						display: flex;
						justify-content: space-around;
						flex-flow: wrap;

						.peopleNumber2 {
							display: flex;
							background: url("../../../assets/images/statistics_bg.png") no-repeat;
							background-size: 100% 100%;
							flex-direction: column;
							box-sizing: border-box;
							padding: 20px;

							.title {
								font-size: 19px;
								font-family: Microsoft YaHei;
								font-weight: 400;
								color: #FFFFFF;
							}

							.price {
								padding-top: 5px;

								span {
									font-size: 44px;
									font-family: Microsoft YaHei;
									font-weight: 400;
									color: #FFFFFF;
								}

								.name {
									font-size: 16px;
								}
							}
						}
					}
				}

				.Statistics_item2_conter {

					//background: pink;
					.title {
						height: 26px;
						font-size: 26px;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #333333;
						margin: 20px 0;
					}
				}
			}

			//.Statistics_item3 {
			//  width: 100%;
			//  //margin: 0 auto;
			//  //background-color: paleturquoise;
			//}

		}
	}
	@media (min-width:1700px) {
		.peopleNumber1 {
			width: 100%;
			//background-color: pink;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;
	
			.peopleNumber2 {
				width: 310px !important;
				// height: 120px;
				margin-right: 20px;
				margin-bottom: 20px;
				display: flex;
				background: url("../../../assets/images/statistics_bg9.png") no-repeat;
				background-size: 100% 100%;
				flex-direction: column;
				box-sizing: border-box;
				padding: 20px;
			}
		}
	}
	@media (max-width:1700px) {
		.peopleNumber1 {
			width: 100%;
			//background-color: pink;
			display: flex;
			justify-content: flex-start;
			flex-flow: wrap;

			.peopleNumber2 {
				width: 310px !important;
				// height: 120px;
				margin-right: 20px;
				margin-bottom: 20px;
				display: flex;
				background: url("../../../assets/images/statistics_bg9.png") no-repeat;
				background-size: 100% 100%;
				flex-direction: column;
				box-sizing: border-box;
				padding: 20px;
			}
		}
	}


	@media (max-width: 1600px) {
		.peopleNumber1 {
			width: 100%;
		
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 27% !important;
				height: 120px !important;
		
				.title {
					font-size: 28px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
		
				.price {
					margin-top: 5px;
		
					span {
						font-size: 37px!important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
		
					.name {
						font-size: 26px;
					}
				}
			}
		}
	}

	@media (max-width: 1500px) {
		.peopleNumber1 {
			width: 100%;
		
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 27% !important;
				height: 120px !important;
		
				.title {
					font-size: 28px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
		
				.price {
					margin-top: 5px;
		
					span {
						font-size: 37px!important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
		
					.name {
						font-size: 26px;
					}
				}
			}
		}
	}

	@media (max-width: 1400px) {
		.peopleNumber1 {
			width: 100%;
		
			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 30% !important;
				height: 115px !important;
		
				.title {
					font-size: 26px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}
		
				.price {
					margin-top: 5px;
		
					span {
						font-size: 33px!important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
		
					.name {
						font-size: 23px;
					}
				}
			}
		}
	}

	@media (max-width: 1300px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 30% !important;
				height: 120px !important;

				.title {
					font-size: 28px!important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 35px!important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 25px!important;
					}
				}
			}
		}
	}

	@media (max-width: 1200px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				box-sizing: border-box;
				width: 30% !important;
				height: 115px !important;

				.title {
					font-size: 26px !important;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
				}

				.price {
					margin-top: 5px;

					span {
						font-size: 33px!important;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}

					.name {
						font-size: 23px;
					}
				}
			}
		}
	}

	@media (max-width: 1100px) {
		.peopleNumber1 {
			width: 100%;

			.peopleNumber2 {
				padding: 10px !important;
				width: 30% !important;
				height: 110px !important;

				.title {
					font-size: 24px !important;
				}

				.price {
					span {
						font-size: 30px !important;
					}

					.name {
						font-size: 22px;
					}
				}
			}
		}
	}
	
	
</style>
